<template>
  <div class="red-green-table">
    <div class="header">
      <div>总人数:{{ results.length }}人</div>
      <div v-for="item in tableLegendData" :key="item">
        <span
          :class="item.value"
          :style="{
            backgroundColor: item.color,
          }"
        ></span
        >{{ item.name }}
      </div>
    </div>
    <a-table
      :columns="columns"
      :data-source="customs"
      row-key="id"
      :pagination="false"
      :scroll="scroll"
    >
      <template #headerCell="{ column }">
        <div v-if="column.key === 'questionNo'" class="textCenter">题号</div>
      </template>
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'questionNo'">
          <div :class="record.name ? 'textCenter' : ''">
            {{ questionName(record) }}
          </div>
        </template>
        <template v-else>
          {{ getCellContent(record, getColumnIndex(column)) }}
        </template>
      </template>
    </a-table>
    <a-modal v-model:open="showModel" class="custom-status-table-modal">
      <template #title> 题目详情 </template>
      <slot name="modalContent" :cellData="currentCellData" />
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from "vue";

interface Props {
  questions: any[];
  results: any[];
  scroll: {
    x?: string | number;
    y?: string | number;
  };
  tableOption?: any;
}

const props = defineProps<Props>();

const showModel = ref(false);
const currentCellData = ref<any>(null);

// 获取单元格内容的函数
const getCellContent = (questionItem: any, studentIndex: number) => {
  // 这里可以根据实际数据结构来获取内容
  return questionItem[`student${studentIndex}`] || "";
};

// 获取列的索引
const getColumnIndex = (column: any) => {
  return props.results.findIndex((student) => student.id === column.key);
};

const tableLegendData = computed(() => {
  const legendData = {
    legend: {
      data: [
        { name: "正确", value: "correct", color: "#42bd41" },
        { name: "错误", value: "wrong", color: "#ec407a" },
        { name: "未提交", value: "unsubmitted", color: "#bcc2c5" },
      ],
    },
  };
  return props.tableOption?.legend?.data || legendData.legend.data;
});

// 问题名称函数
const questionName = (questionItem: any) => {
  return questionItem.name || questionItem.question || "题目";
};

// 构建表格列配置
const columns = computed(() => {
  const cols = [
    {
      title: " ",
      key: "questionNo",
      width: 130,
    },
  ] as any[];
  props.results.forEach((student) => {
    cols.push({
      title: student.name.split("").join("\n"),
      key: student.id,
      width: 50,
      class: "student",
      align: "center",
      customCell: (record: any) => customCell(record, student),
    });
  });
  return cols;
});

const customs = computed(() => {
  let results = props.results || [];
  const questions = props.questions.map((question, idx) => {
    const wrongs = results.reduce(
      (sum, r) =>
        sum +
        (r.questions[idx] && r.questions[idx].judgement.value === "wrong"
          ? 1
          : 0),

      0
    );
    const corrects = results.reduce(
      (sum, r) =>
        sum +
        (r.questions[idx] && r.questions[idx].judgement.value === "correct"
          ? 1
          : 0),
      0
    );
    return {
      ...question,
      wrongs,
      corrects,
    };
  });
  console.log(questions);
  return questions;
});

function customCell(record: any, student: any) {
  const cellStateClass = cellClass(student?.id, record);
  const legendData = tableLegendData.value.filter((it: any) => it.value === cellStateClass)[0];
  console.log(legendData.color);
  return {
    class: `${cellStateClass}`,
    style: {
      backgroundColor: `${legendData.color || '#ccc'} !important`,
    },
    onClick: () => {
      onClickCell(record, student);
    },
  };
}

function cellClass(id: string, questionItem: any) {
  const reviews = props.results.filter((student) => student.id === id)[0]
    .questions;
  if (questionItem.cellName) return "";
  if (!reviews.length) {
    return "unsubmitted";
  }
  return reviews[questionItem.questionIndex].judgement.value;
}

function onClickCell(record: any, student: any) {
  currentCellData.value = { record, student };
  showModel.value = !showModel.value;
  console.log("onClickCell", record, student);
}
</script>

<script lang="ts">
export default {
  name: "StatusTable",
};
</script>

<style lang="less">
// 定义Less变量
@correct: #42bd41;
@partial: #9ccc65;
@wrong: #ec407a;
@unanswered: #999;
@unsubmitted: #bcc2c5;

.red-green-table {
  width: 100%;
  padding: 0;
  display: inline-block;
  height: 100%;

  .header {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    div {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-left: 20px;
    }
    span {
      width: 20px;
      height: 20px;
      display: inline-block;
      vertical-align: text-top;
      margin-right: 10px;
    }
  }

  .ant-table-fixed-left .ant-table-fixed {
    td:last-child,
    th:last-child {
      border-right: none;
    }
  }

  .question-type-icon {
    margin-right: 5px;
  }

  .ant-table-body.scroll-hidden::-webkit-scrollbar-track {
    background-color: #fff;
  }

  .ant-table-scroll table {
    min-width: auto;
  }

  .textCenter {
    text-align: center;
  }

  .ant-table-thead {
    tr {
      border: 0;

      th {
        border-right: 1px solid #e8e8e8;
        border-bottom: 1px solid #e8e8e8;
        border-top: 1px solid #e8e8e8;
        background: #ebf3f7;
        color: rgba(0, 0, 0, 0.85);
        font-weight: 500;

        &:nth-child(1) {
          border-left: 1px solid #e8e8e8;
        }

        &.empty {
          border: 0;
        }

        &:nth-last-child(2).student {
          border-radius: 0 5px 0 0;
        }

        &.student .ant-table-column-title {
          max-height: 100px;
          display: inline-block;
          overflow: hidden;
        }
      }
    }

    .ant-table-row-cell-last.empty {
      background-color: #fff;
    }
  }

  .ant-table-tbody {
    tr {
      border: 0;

      td {
        padding: 0;
        border-right: 1px solid #e8e8e8;
        border-bottom: 1px solid #e8e8e8;
        background-color: #fff !important;

        & > div {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }

        &:nth-child(1) {
          border-left: 1px solid #e8e8e8;
          padding: 10px 5px;
        }

        &.empty {
          border: 0;
        }

        &.correct {
          cursor: pointer;
          background-color: @correct !important;
        }

        &.wrong {
          cursor: pointer;
          background-color: @wrong !important;
        }

        &.unanswered {
          cursor: pointer;
          background-color: @unanswered !important;
        }

        &.unsubmitted {
          cursor: pointer;
          background-color: @unsubmitted !important;
        }

        &.none {
          cursor: pointer;
          background-color: #ffa726 !important;
        }

        &.partial {
          cursor: pointer;
          background-color: @partial !important;
        }
      }

      &:nth-last-child(1) {
        td:nth-child(1) {
          border-radius: 0 0 0 5px;
        }

        td:nth-last-child(2).student {
          border-radius: 0 0 5px 0;
        }
      }
    }
  }

  .ant-table-fixed-right {
    .ant-table-body-inner {
      &::-webkit-scrollbar {
        width: 0;
      }
    }
  }
}
</style>
